<template>
	<view>
		<uni-nav-bar left-icon="back" left-text="返回" :border="false" title="申请记录"
		 status-bar fixed @clickLeft="backLastPage"
		></uni-nav-bar>
		
		<view class="p-2">
			<form @submit="formSubmit">
				<view class="flex my-2 justify-center align-center font-lg">
					<view class="mx-2">
						<text style="color: #FFFFFF;">姓名</text>
						<text>姓名:</text>
					</view>
					<input type="text" name="name" :value="taskDetail.sbName"
					 class="border px-2 py-1 rounded font-lg flex-1"/>
				</view>
				<view class="flex my-2 justify-center align-center font-lg">
					<view class="mx-2">
						<text style="color: #FFFFFF;">民族</text>
						<text>民族:</text>
					</view>
					<input type="text" name="name" :value="taskDetail.nation"
					 class="border px-2 py-1 rounded font-lg flex-1"/>
				</view>
				<view class="flex my-2 justify-center align-center font-lg">
					<text class="mx-2">身份证号:</text>
					<input type="number" name="idcard" :value="taskDetail.sbIdcard"
					 class="border px-1 py-1 rounded font-lg flex-1" />
				</view>
				<view class="flex my-2 justify-center align-center font-lg">
					<text class="mx-2">银行卡号:</text>
					<input type="number" name="phone" :value="taskDetail.accountCard"
					 class="border px-1 py-1 rounded font-lg flex-1" />
				</view>
				<view class="flex my-2 align-center font-lg">
					<text class="mx-2">出生日期:</text>
					<picker mode="date" :value="taskDetail.birth" @change="changeBirthDate"
					 class="border px-2 py-1 rounded font-lg flex-1">
						<view>{{taskDetail.birth}}</view>
					</picker>
				</view>
				
				<view class="flex my-2 justify-center align-center font-lg">
					<text class="mx-2">开户行名称:</text>
					<picker :value="bankPinkerIndex" @change="bankPickerChange" :range="bankPinker"
					 class="border px-2 py-1 rounded font-lg flex-1">
						<view>{{bankPinker[bankPinkerIndex]}}</view>
					</picker>
				</view>
				<view class="flex my-2 justify-center align-center font-lg">
					<text class="mx-2">户籍地址:</text>
					<textarea :value="taskDetail.census" auto-height class="border px-1 py-1 rounded font-lg flex-1" />
				</view>
				<view class="flex my-2 justify-center align-center font-lg">
					<text class="mx-2">现居住地址:</text>
					<textarea :value="taskDetail.nowCensus" auto-height class="border px-1 py-1 rounded font-lg flex-1" />
				</view>
				<view class="flex justify-center align-center">
					<radio-group name="gender">
						<label class="mr-2 font-lg"><radio value="0"
						 :checked="taskDetail.gender === 0" />男</label>
						<label class="font-lg"><radio value="1"
						 :checked="taskDetail.gender === 0" />女</label>
					</radio-group> 
				</view>
				<view class="my-2 font-lg">
					<text>详细图片:</text>
					<view class="flex flex-wrap">
						<block v-for="(item, index) in taskDetail.imgList" :key="index">
							<image :src="item" class="p image" @tap="previewImg(index)"></image>
						</block>
					</view>
				</view>
				<view class="px-5 my-3 flex justify-center">
					<view class="mr-3">
						<button type="primary" form-type="submit">审核通过</button>
					</view>
					<view>
						<button type="default" @tap="openResultPopup(false)">驳回</button>
					</view>
				</view>
			</form>
		</view> 
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue';
	
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				taskDetail: {
					sbName: '张启山',
					birth: '1990-09-01',
					nation: '汉',
					census: '安徽省滁州市凤阳县府城镇府东社区委员会1栋2单一',
					nowCensus: '安徽省滁州市凤阳县府城镇府东社区委员会1栋2单一',
					account: '凤阳县招商银行',
					accountCard: '78777777',
					gender: 0,
					sbIdcard: 342625199910021136,
					imgList: [
						'/static/banner/banner1.jpg',
						'/static/banner/banner1.jpg',
						'/static/banner/banner1.jpg',
						'/static/banner/banner1.jpg'
					]
				},
				bankPinker: ['工商银行', '招商银行'],
				bankPinkerIndex: 0
				
			}
		},
		onLoad (e) {
			
		},
		methods: {
			formSubmit (e) {
				this.taskDetail = e.detail.value;
				console.log(this.taskDetail);
				if (this.checkParam(this.taskDetail)) {
					
				}
			},
			// 检测参数
			checkParam (obj) {
				// 遍历对象检测都不能为空
				for (let key in obj) {
					if (obj[key] === "") {
						uni.showToast({
						    title: '所以字段都要填写',
							icon: "none",
							duration: 2000
						});
						return false;
					}
				}
				// 检测手机号码时候有误
				if(!(/^1[3456789]\d{9}$/.test(obj.phone))){ 
					uni.showToast({
						title: '手机号码有误',
						icon: "none",
						duration: 2000
					}); 
					return false; 
				}
			},
			previewImg (currentIndex) {
				uni.previewImage({
					current: currentIndex,
					urls: this.taskDetail.imgList
				});
			},
			changeBirthDate (e) {
				this.taskDetail.birth = e.target.value
			},
			bankPickerChange (e) {
				this.bankPinkerIndex = e.target.value
			},
			backLastPage () {
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
.image { width: 348rpx; height: 300rpx; border-radius: 24rpx; }
</style>